猪小弟的动画想必很多人小时候都看过，那长大的我们做了前端的工作，有没有用前端的想法去思考，猪小弟从圆圈里出来挥手的效果是如何实现的呢？

如果用这个效果来作为头像的效果，不仅有3D的感觉，而且仿佛头像在与人互动一样。这显然要比一张图片来的有意思，话不多说，让我们来看看实现后的效果。

看到了吗？我们将制作一个缩放动画，其中头像似乎从它所在的圆圈中弹出。很有意思吧，不要翻到页尾哦，让我们一起逐步构建这个动画效果吧！

看过实现效果后，我们可能会想到用一个 div 和一个 img 元素来实现，然后 hover 和 transform: scale 来控制缩放，overflow 来控制显示范围，可是结果却不行，效果是这样的。

实际情况呢，我们仅需一个 元素就可以实现。什么？你不信？

那就让我们用这唯一的 img 元素来实现一下，从中你将学到 CSS 渐变、遮罩、outline 属性的行为、转换以及其他许多内容。

我们先从 transform 开始，其中用到了 css 的变量，对 css 变量还不了解的小伙伴可以点击链接去看一下，这里就不详细赘述了。

这很简单，接下来实现图片圆形的边框与背景，这个边框我们用什么实现呢？有人说边框，直接用 border 不就行了, 可是 border 的话就会随着图片的大小一起被缩放。所以这里我们可以使用径向渐变，因为径向渐变我们可以单独控制，而且渐变之间可以硬停止，我们可以用它来绘制背景和边框，这是个完美的解决方案。

但是在写径向渐变之前我们要了解渐变尺寸的几个关键字

从上图中我们可以看出，效果一与效果二才是我们想要的，而径向渐变的默认值是效果四的样子，所以在我们实现渐变时，要使用的是效果一的关键字。

下一步我们要做的是在悬停时调整渐变大小，随着头像的放大，渐变需要保持其大小。由于我们正在使用的 scale 是放大，所以我们实际上需要减小渐变的大小，否则它会随着头像而放大。因此，当头像放大时，我们需要渐变来缩小。也就是说我们头像放大几倍，渐变就要缩小几倍，那么就可以使用 100% / 放大的倍数 来得到渐变的大小。

我们又成功的完成了一步，但我们仍然需要隐藏头像的身体部分，这是最麻烦的部分，也是我们接下来要做的事情。

因为渐变是一个背景，所以图片是覆盖在渐变之上的，我们要让红色的边框压在图片上边，我们就要使用一个新的东西来压一下，使用 border 的话显示是不可以的，因为他会随着头像的放大而放大，而 outline 可以做到 border 做不到的事情。

在实现之前我们先来认识了解一下 outline 中的一个关键属性，outline-offser，属性用于设置 outline 与一个元素边缘或边框之间的间隙，效果如下。

我们需要 outline 覆盖在边框之上，而默认值是紧贴着，所以我们在使用时要使用负值将 outline 向内收缩边框的宽度就可以了。

我们再来思考一下如何让头像缩放时 outline 保持不变永远覆盖在边框之上呢？我们画个图看一下。

由上图所示我们得到了我们想要的值，那么我们将结果套入代码之中。

现在已经看起来越来越有意思了，我们接下来就是要去除挡在头发的线，这个很简单，让我们在顶部添加带有填充的空间，以帮助避免顶部的重叠。

得到效果如上图所示，这是因为背景图默认填充的是 padding 的范围，我们只需要更改背景图的填充范围即可。

到这里我们基本实现了效果，如果忽视掉圆圈外的干扰我们就已经完成了，所以接下来我们的最后一步就是框一个范围，让范围内的内容呈现范围外的隐藏，这时候就要依靠我们的压轴属性了 mask。

由上图我们可以看出黄色框住的部分是我们要显示的部分，黄色框由一个矩形和一个圆形组成，并且我们发现一下两点。

那我们来使用 mask 实现这个两个区域。

接下来，还有一个矩形部分，linear-gradient。

矩形部分的代码可能不太容易理解，我们暂时将 img 中的 background 与 -webkit-mask 注释掉，给 img 添加一个纯色的背景让他不重复且居中。

我们就得到了这样的一个效果，可以看到背景上移了，而 outline 并没有动，回顾一下我们控制 outline 的逻辑，outline 的收缩大小正好是我们背景上移的大小，只不过 outline 收缩是负值，背景向下移动需要正值，我们来写一下。

好了，现在我们的背景图位置正确了，让我们来处理一下他的大小问题。

可以看到现在的效果已经很好了，那么现在我们将 background 的代码当作矩形的代码合并到 -webkit-mask 中，将原先注释的代码还原，这里不要忘了，我们考虑过矩形的宽度是 outline 减去两边边框的宽度，要一并写入其中。并将背景色改为透明色。

到这里我们已经完全完成了，但是效果并不完美还有一个小小的 bug 存在，让我们看一下现在的效果，找找 bug 在哪。

眼神好的同学可能已经发现了，在头像缩放时会有很细的线闪动，这是因为我们在绘制 mask 矩形时完全是贴着 outline 的内边的，这就导致在缩放时由于绘制的问题导致不能完美的实现，所以我们可以在矩形减去边框时多减去一点点。

我们再来看看最终的效果。

一个小小的头像效果考察到了我们很多 css 的知识， 我们使用一个 img 元素和一些 css 的技巧以及数学公式来完成了这个头像的花式悬停效果，很多小细节都在其中，我们今天探究这个头像效果实现，其实也是检验我们基本功的过程。有句古话说：合抱之木，生于毫末；九层之台，起于垒土；千里之行，始于足下。更高的薪资建立在更牢固的基础之上，让我们温故而知新，努力学习吧！

下面是全部的代码和原始图片，喜欢的小伙伴可以跟着上面的过程自己写一遍。

备注：学习来源 渡一Web前端学习频道